<template>
  <el-dialog v-model="dialogVisible" :title="'会员充值'" width="500px" :append-to-body="true" :before-close="handleClose">
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm" status-icon>
      <el-form-item label="会员名称" prop="name">
        <el-input v-model="ruleForm.name" type="text" disabled />
      </el-form-item>
      <el-form-item label="充值金额" prop="name">
        <el-input v-model="ruleForm.name" type="text" placeholder="请输入充值金额" />
      </el-form-item>
      <!-- 备注 -->
      <el-form-item label="备注" prop="remark">
        <el-input v-model="ruleForm.remark" type="textarea" placeholder="请输入备注" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCloses(ruleFormRef)">取消</el-button>
        <el-button type="primary" @click="submit(ruleFormRef)">
          确 认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessage, FormInstance } from 'element-plus'
import { REQUEST } from '@/api/request'
const ruleFormRef = ref<FormInstance>()
const title = ref('')
const dialogVisible = ref(false)
const emits = defineEmits(['ok'])
import HTTP_URI from '@/api/base_url'
import { getToken } from '@/plugins/cookie'
const headers = ref({
  'Token': getToken()
})
const editorRef = ref()
const ruleForm = ref({
  id: '',
  imgUrl: '', //图片
  name: '',//充值金额
  prcie: '',//价格
  content: '',//内容
  status: 1,//状态 1 开启 2 关闭
  remark: ''//备注
})
const options = ref([])
const rules = ref({
  imgUrl: [{ required: true, message: '请上传图片', trigger: 'change' }],
  name: [{ required: true, message: '请输入充值金额', trigger: 'change' }],
  type: [{ required: true, message: '请输入充值金额', trigger: 'change' }],

  prcie: [{ required: true, message: '请输入价格', trigger: 'change' }],
  content: [{ required: true, message: '请输入内容', trigger: 'change' }],
  status: [{ required: true, message: '请选择状态', trigger: 'change' }],
  remark: [{ required: false, message: '请输入备注', trigger: 'change' }],

})
const handleAvatarSuccess = (response: any) => {
  ruleForm.value.imgUrl = response.data.url
}
const getValue = (res: any) => {
  console.log(res, 'getValue');
  // ruleForm.value.content = res
}
const beforeAvatarUpload = (rawFile: any) => {
  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
    ElMessage.error('上传图片格式仅支持jpg、png')
    return false
  } else if (rawFile.size / 1024 / 1024 > 10) {
    ElMessage.error('图片大小不能超过 10MB')
    return false
  }
  return true
}
const openModal = (t: any, data: any, e: any) => {
  options.value = data
  ruleForm.value = {
    id: '',
    imgUrl: '', //图片
    name: '',//充值金额
    prcie: '',//价格
    content: '',//内容
    status: 1,//状态 1 开启 2 关闭
    remark: ''//备注
  }
  dialogVisible.value = true
  title.value = t
  if (e) {
    ruleForm.value = e
  }
}
const handleClose = () => {
  dialogVisible.value = false
  emits('ok')
}
const handleCloses = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  emits('ok')
  dialogVisible.value = false
}
const submit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    console.log(editorRef.value.data.content, '09')
    if (editorRef.value.data.content.length > 11) {
      ruleForm.value.content = editorRef.value.data.content
    } else {
      ruleForm.value.content = ''
    }
    if (valid) {
      if (title.value === '新增') {

        REQUEST.POST('USERADD', ruleForm.value).then((res: any) => {
          if (res.status === 200) {
            ElMessage({
              type: 'success',
              message: '添加成功！'
            })
            formEl.resetFields()
            dialogVisible.value = false
            emits('ok')
          } else {
            ElMessage({
              type: 'warning',
              message: res.message
            })
          }
        })
      } else {
        REQUEST.POST('USEREDIT', ruleForm.value).then((res: any) => {
          if (res.status === 200) {
            ElMessage({
              type: 'success',
              message: '编辑成功'
            })
            dialogVisible.value = false
            formEl.resetFields()
            emits('ok')
          } else {
            ElMessage({
              type: 'warning',
              message: res.message
            })
          }
        })

      }
    }
  })
}
defineExpose({ openModal })
</script>

<style lang="scss" scoped>
.avatar-uploaders {
  width: 120px;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px #dcdfe6 dashed;
  cursor: pointer;
  border-radius: 5px;
}

.avatar-uploaders:hover {
  border: 1px #409eff dashed;
}

.avatar-uploader-icon {
  font-size: 32px;
  color: #cccccc;
}

.avatar-uploaders .avatar {
  width: 120px;
  height: 120px;
  display: block;
}
</style>
